<template>
  <div class="qingdan">
    <div class="top">
    <div>
      <van-icon name="arrow-left" @click="back()"/>
      <h1>缴费清单</h1>
      <div>
        <van-icon name="ellipsis" />
        <van-icon name="cross" @click="index()"/>
      </div>
    </div>
  </div>
  <div class="pic">
    <img src="@/assets/index/qingdan.jpg" alt="">
  </div>
  <p>{{this.$route.query.mianzhi}}元手机话费</p>
  <div class="biao">
    <div>
        <p>充值号码</p>
        <b>{{this.$route.query.haoma}}</b>
    </div>
    <div>
        <p>商品面值</p>
        <p>{{this.$route.query.mianzhi}}元</p>
    </div>
    <div>
        <p>商品售价</p>
        <p>{{this.$route.query.shoujia}}元</p>
    </div>
    <div>
        <p>支付金额</p>
        <b>{{money}}元</b>
    </div>
  </div>
  <div class="text">
    <strong>特别提醒你：</strong>
    <p>1.支付时需选择<span>龙支付绑定的建行卡</span>方可享受优惠(可在[首页.龙支付.我的-银行卡]查看绑定账号) <br>
       2.综合积分<span>单笔最高抵扣10元</span>，活动期间累计最高积分抵扣200元</p>
  </div>
  <div class="queren">
    <p @click="pay()">确认</p>
  </div>
  </div>
</template>

<script>
   import { phone_pay } from "@/apis/user";
   import { Dialog } from 'vant';
export default {
  data(){
      return {
        carid:localStorage.id,
        money:this.$route.query.shoujia
      }
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  created(){
    console.log(this.carid)
    console.log(this.money)

  },
    methods:{
    back(){
      this.$router.go(-1)
    },
    index(){
      this.$router.push("/index")
    },
    pay(){
      phone_pay({accountCard:this.carid,money:this.money}).then((ok)=>{
        // console.log(ok)
        console.log(ok.data.message)
        if(ok.data.message!=""){

          Dialog({ message: '缴费成功' });
          // if(dialog.)
        }else {
          Dialog({ message: '缴费失败' });
        }
       
      })
    }
  }

}
</script>

<style lang="scss" scoped>
    .top {
    width: 100%;
    height: .8rem;
    // background: #999;
    position: relative;
    background: #4465a9;
        color: #fff;
    >div {
      width: 90%;
      display: flex;
      justify-content: space-between;
      position: absolute;
      bottom: .1rem;
      left: 5%;
      >div {
        width: .5rem;
        display: flex;
        justify-content: space-between;
      }
    }
  }
.qingdan {
    width: 100%;
    height: 6.67rem;
    position: relative;
    .pic {
        width: .63rem;
        height: .63rem;
        margin:.2rem auto;

    }
    >p {
        font-size: .2rem;
        color: #f00;
        text-align: center;
    }
}
.biao {
    width: 90%;
    margin: auto;
    margin-top: .3rem;
    >div {
        display: flex;
        justify-content: space-between;
        border-bottom: 2px solid #f4f4f4;
        margin-bottom: .15rem;
        padding: 0 .1rem .1rem .1rem;
        b {
            color: #f00;
            font-weight: bolder;
        }
        p {
            color: #393939;
            font-size: .12rem;
        }
    }
}
.text {
    width: 90%;
    margin:.15rem auto;
    strong {
        color: #f00;
        font-size: .14rem;
        font-weight: bolder;
    }
    p {
        font-size: .12rem;
        margin-top: .08rem;
        span {
        font-size: .12rem;
        color: #f00;
    }
    }
    
}
.queren {
    width: 3.3rem;
    height: .4rem;
    background: #336bb1;
    border-radius: .06rem;
    position: absolute;
    bottom: .2rem;
    left: calc(50% - 1.65rem);
    p {
        color: #fff;
        text-align: center;
        line-height: .4rem;
    }

}
</style>